<template>
  <el-container class="app-container">
    <el-collapse @change="handleCollapseChange" v-model="collapseActiveName">
      <el-collapse-item :title="collapseTitle" name="1">
        <el-tabs type="border-card">
          <el-form :model="pageInfo" ref="form" label-width="100px" size="medium">
            <el-row>
              <el-col :span="8" :offset="0">
                <el-form-item prop="name" label="租户名称：">
                  <el-input v-model.trim='pageInfo.name' placeholder="请输入名称搜索"></el-input>
                </el-form-item>
              </el-col>
              <!--<el-col :span="7" :offset="1">
                <el-form-item prop="tenantId" label="所属办公空间:">
                  <el-select v-model="pageInfo.tenantId" placeholder="请选择">
                    <el-option
                      v-for="item in spaceOptions"
                      :key="item.id"
                      :label="item.areaName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>-->
              <el-col :span="7" :offset="0">
                <el-form-item prop="groupId" label="行业分类:">
                  <el-select v-model="pageInfo.groupId" placeholder="请选择">
                    <el-option
                      v-for="item in zsOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             <!-- <el-col :span="8" :offset="0">
                <el-form-item prop="groupId" label="状态:">
                  <el-select v-model="pageInfo.groupId" placeholder="请选择">
                    <el-option
                      v-for="item in zxOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>-->

              <el-col :span="8" :offset="1" >
                <el-button type="primary" icon="el-icon-search" @click='getData'>搜索</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-tabs>
      </el-collapse-item>

    </el-collapse>
    <!--<el-header class="m-t-20">
&lt;!&ndash;      <el-button type="primary" icon="el-icon-plus" @click="addOne">租户</el-button>&ndash;&gt;
    </el-header>-->

    <!--表格-->
    <table-view
      :columns="tableContent"
      :pageList="columnData"
      :templateDiv="{operation:true,remark:true}"
    >
      <template slot="operation" slot-scope="scope">
<!--        <el-button size="mini" ype="primary" @click="editBtnClick(scope.row ,'update')">编辑</el-button>-->
        <el-button size="mini" type="primary" @click="editBtnClick(scope.row ,'view')">查看详情</el-button>
<!--        <el-button size="mini" type="danger" @click="editBtnClick(scope.row ,'delete')">删除</el-button>-->
      </template>
      <template slot="remark" slot-scope="scope">
        <el-popover
          v-if="scope.row.remark&&scope.row.remark.length>16"
          placement="top-start"
          width="200"
          trigger="hover"
          :content="scope.row.remark">
          <div slot="reference" style="width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">{{scope.row.remark}}</div>
        </el-popover>
        <span v-else>
          {{scope.row.remark}}
        </span>
      </template>
    </table-view>

    <!--分页-->
    <pagination-view :pagesize="pageInfo.pageSize"
                     :currentPage="pageInfo.pageNumber"
                     :total="total"
                     @size-change="sizeChange"
                     @current-change="pageChange"
    ></pagination-view>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
  import TableView from '@/components/TableView'
  import ImgUpload from '@/components/ImgUpload'

  import PaginationView from '@/components/PaginationView'
  import * as pageApi from '@/api/shopBusiness/tenantManageList'
  // import * as spaceApi from '@/api/spaceBusiness/spaceManage'

  export default {
    name: 'list',
    components: {
      TableView,
      PaginationView,
      ImgUpload
    },
    data() {
      return {
        dialogAddDetail:false,
        spaceOptions:[],
        zsOptions:[{label:'全部',value:''},{label:'可招商',value:'1'},{label:'不可招商',value:'0'}],
        zxOptions:[{label:'全部',value:''},{label:'合同生效中',value:'1'},{label:'已失效',value:'2'},{label:'未开始',value:'3'}],
        tableContent:[{
          field: 'name',
          label: '名称'
        }, {
          field: 'productName',
          label: '简称'
        }, {
          field: 'contactName',
          label: ' 联系人'
        }, {
          field: 'contactMobile',
          label: ' 联系人电话'
        }, {
          field: 'industryType',
          label: '行业分类'
        }, {
          field: 'registerCapital',
          label: '注册资本'
        },{
          field: 'establishDate',
          label: '注册时间'
        }, {
          field: 'remark',
          label: '备注',
          width:150
        }, {
          field: 'operation',
          label: '操作',
          width:200
        }],

        columnData: [],
        customWidth: '',
        pageInfo: {
          pageNum: 1,
          pageSize: 20,
          name: '',
          // tenantId:''
        },
        total: 0,
      }
    },
    watch: {},
    methods: {
      //拉取空间list
      getSpaceList(current) {
        this.pageInfo.pageNumber = current ? current : this.pageInfo.pageNumber
        spaceApi.getAreaAll().then(res => {
          this.spaceOptions = res.body
        })
      },
      addOne() {
        this.$router.push({name:'tenantListAdd'})
      },

      /*changeUserStatus: function (id, enable) {
        pageApi.changeEnable(id, enable).then((res) => {
          this.handleMessage(res)
          if (res.code === '200') this.getData()
        })
      },*/
      handleRes(res) {
        this.handleMessage(res)
        if (res.code === '200') {
          this.getData()
        }

      },
      // pageSize变化函数
      sizeChange(val) {
        this.pageInfo.pageSize = val
        this.getData()
      },
      // page变化函数
      pageChange(val) {
        this.pageInfo.pageNumber = val
        this.getData()
      },
      editBtnClick(val, type) {
        switch (type) {
          case 'view':
            this.$router.push({name:'xbManageView',query:{id:val.id,pageType:'view'}})
            break
          case 'update':
            this.$router.push({name:'tenantListAdd',query:{id:val.id,pageType:'update'}})
            break
          case 'delete':
            this.$confirm(`确定删除吗？是否继续?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.deleteIt(val.id)
            })
            break
        }
      },
      deleteIt(id){
        pageApi.deleteIt(id).then(res=>{
          this.handleRes(res)
        })
      },
      //拉取列表
      getData() {
        pageApi.getList(this.pageInfo).then(res => {
          this.columnData = res.body.records
          this.total = Number(res.body.total)
          this.pageInfo.pageNumber = Number(res.body.pageNumber) || 1
        })
      },
      handleClose(done) {
        let resetForm = {
          costAmount: '',
          courseProductId: '',
          duration: '',
          durationTime: '',
          enable: true,
          intro: '',
          memo: '',
          productName: '',
          saleAmount: '',
          sort: '',
          tag: ''
        }
        this.form = Object.assign({}, this.form, resetForm)
        done()
      }

    },
    mounted() {
      this.getData()
    }
  }
</script>

<style lang="scss" scoped>

</style>
